Adds a Hackernews example site (#5213)

* adds the hackernews example - TODO add readme content

* refactor: moving styles from root.css into components

* chore: add README content

* chore: lint fixes + prettier-plugin-astro@0.4.0

* Update examples/hackernews/README.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* lint: remove unused variable

* nit: adding check command to example

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

1 files changed, 105 insertions, 0 deletions

diff --git a/examples/hackernews/src/pages/[...stories].astro b/examples/hackernews/src/pages/[...stories].astro
new file mode 100644
index 000000000..fa227e0c1
--- /dev/null
+++ b/examples/hackernews/src/pages/[...stories].astro
@@ -0,0 +1,105 @@
+---
+import For from '../components/For.astro';
+import Show from '../components/Show.astro';
+import Story from '../components/Story.astro';
+import Layout from '../layouts/Layout.astro';
+import fetchAPI from '../lib/api';
+import type { IStory } from '../types.js';
+
+const mapStories = {
+	top: 'news',
+	new: 'newest',
+	show: 'show',
+	ask: 'ask',
+	job: 'jobs',
+};
+
+function safeParseInt(value: any, fallback: number) {
+	try {
+		return parseInt(value) || fallback;
+	} catch {
+		return fallback;
+	}
+}
+
+const page = safeParseInt(Astro.url.searchParams.get('page'), 1);
+const type =
+	Astro.params.stories && Astro.params.stories in mapStories
+		? (Astro.params.stories.toString() as keyof typeof mapStories)
+		: 'top';
+
+const stories = (await fetchAPI(`${mapStories[type]}?page=${page}`)) as IStory[];
+---
+
+<Layout>
+	<section>
+		<nav aria-labelledby="current-page">
+			<Show when={page > 1}>
+				<a href={`/${type}?page=${page - 1}`} aria-label="Previous Page"> &lt; prev</a>
+				<span slot="fallback" aria-disabled="true"> &lt; prev</span>
+			</Show>
+			<span id="current-page">page {page}</span>
+			<Show when={stories?.length >= 29}>
+				<a href={`/${type}?page=${page + 1}`} aria-label="Next Page">more &gt;</a>
+				<span slot="fallback" aria-disabled="true"> more &gt;</span>
+			</Show>
+		</nav>
+		<main>
+			<Show when={stories}>
+				<ul>
+					<For each={stories}>{(story: IStory) => <Story story={story} />}</For>
+				</ul>
+			</Show>
+		</main>
+	</section>
+</Layout>
+
+<style>
+	section {
+		padding-top: 45px;
+	}
+
+	nav,
+	main {
+		background-color: rgb(248 250 252);
+		border-radius: 2px;
+	}
+
+	nav {
+		padding: 15px 30px;
+		position: fixed;
+		text-align: center;
+		top: 55px;
+		left: 0;
+		right: 0;
+		z-index: 998;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+	}
+
+	nav a {
+		margin: 0 1em;
+	}
+
+	[aria-disabled='true'] {
+		color: rgb(71 85 105);
+		margin: 0 1em;
+	}
+
+	main {
+		position: absolute;
+		margin: 30px 0;
+		width: 100%;
+	}
+
+	ul {
+		list-style-type: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	@media (max-width: 600px) {
+		main {
+			margin: 10px 0;
+		}
+	}
+</style>